// 1、列表渲染、条件渲染

// 导入组件样式
import './One.css'
// 定义并导出一个函数式组件
export default function One() {
    // jsx的语法： { js 表达式 }
    let name = "张三"
    let foods = ['西瓜', '草莓', '苹果', '蛋糕', '饼干']
    let isVIP = true;
    return (
        <div className="one">
            <h2>JSX</h2>
            <p>姓名：{name}</p>
            <h3>食物：</h3>
            <ul>
                {/* 列表渲染 */}
                {
                    foods.map((food,i) =>{
                        return <li key={i}>{food}</li>
                    })
                }
            </ul>
            {/* 条件渲染 */}
            <h3>{isVIP ? '您是vip用户' : '您不是vip用户'}</h3>
            {isVIP ? <h3>送你一辆汽车</h3> : ''}
            {isVIP && <h3>送你一台手机</h3>}
        </div>
    )
}

